// pdb :protein data bank  存分子信息
import * as THREE from 'three'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls' 
import { PDBLoader } from 'three/examples/jsm/loaders/PDBLoader'
import {CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'


let camera, scene, renderer,css2DRenderer
let controls
const url = 'models/pdb/caffeine.pdb'

initScene()
initAxesHelper()
initCamera()
initLight()
initMeshes()
initRenderer()
initCSS2DRenderer()
initControls()
animate()

window.addEventListener('resize', onWindowResize)
function onWindowResize(params) {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}
function initScene(params) {
    scene = new THREE.Scene()
    // scene.background = new THREE.Color(0x888888)

}

function initAxesHelper(params) {
    scene.add(new THREE.AxesHelper(1))
}

function initCamera(params) {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100)
    camera.position.z = 10
}

function initLight(params) {
    const light1 = new THREE.DirectionalLight(0xffffff, 0.8)
    light1.position.set(1, 1, 1)
    scene.add(light1)

    const light2 = new THREE.DirectionalLight(0xffffff, 0.5)
    light1.position.set(-1,- 1, 1)
    scene.add(light2)
}


//创建原子物体
function initMeshes() {
    const loader = new PDBLoader()
    loader.load(url,function (pdb) {
        //atoms   院子模型的颜色和位置
        //化学键需要position
        // json  0-2 位置信息 3.颜色 4.label

        let positions = pdb.geometryAtoms.getAttribute('position');
        const colors = pdb.geometryAtoms.getAttribute('color')

        const position = new THREE.Vector3()
        const color = new THREE.Color()

        for (let i = 0; i < positions.count; i++) { 
            console.log(positions.count);
            position.x = positions.getX(i);
            // console.log( position.x);
            position.y = positions.getY(i);
            position.z = positions.getZ(i);

            color.r = colors.getX(i)
            color.g = colors.getY(i)
            color.b = colors.getZ(i)

               //小球
        const geometry = new THREE.IcosahedronGeometry(0.39, 5)
        const material = new THREE.MeshPhongMaterial({ color: color })
        const object = new THREE.Mesh(geometry, material);
        object.position.copy(position)
        scene.add(object)

        console.log(pdb);


        }

        //生成化学键
        positions = pdb.geometryBonds.getAttribute('position');
        const start = new THREE.Vector3()
        const end = new THREE.Vector3()
        for (let i = 0; i < positions.count; i += 2){
            start.x = positions.getX(i)
            start.y = positions.getY(i)
            start.z = positions.getZ(i)

            end.x = positions.getX(i + 1)
            end.y = positions.getY(i+1)
            end.z = positions.getZ(i + 1)
            
            //mesh
            const geometry = new THREE.BoxGeometry(0.05, 0.05, 0.05)
            const material = new THREE.MeshPhongMaterial({color:0xffffff})
            const object = new THREE.Mesh(geometry, material)
            object.position.copy(start)
            object.position.lerp(end, 0.5)
            object.scale.z = start.distanceTo(end) * 10
            object.lookAt(end)
            scene.add(object)

        }

        //json  说明是哪一个元素
        const json = pdb.json
        for (let i = 0; i < json.atoms.length; i++){
            console.log(json.atoms[i]);
            const atom = json.atoms[i]
            const text = document.createElement('div')
            const c = 'rbg(' + atom[3][0] + ',' + atom[3][1] + ',' + atom[3][2]
            text.style.color = c
            text.textContent = atom[4]

            position.x = atom[0]
            position.y = atom[1]
            position.z = atom[2]

            const label = new CSS2DObject(text)
            label.position.copy(position)
            scene.add(label)

        }

    })
}

function initRenderer(params) {
    renderer = new THREE.WebGL1Renderer({ antlialias: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
}

function initCSS2DRenderer(params) {
    css2DRenderer = new CSS2DRenderer()
    css2DRenderer.setSize(window.innerWidth, window.innerHeight)
    css2DRenderer.domElement.style.position = 'absolute';
    css2DRenderer.domElement.style.top = '0px';
    //让控制器能生效，注释了就不生效了
    css2DRenderer.domElement.style.pointerEvents = 'none'
    document.body.appendChild(css2DRenderer.domElement)
}

function initControls(params) {
    controls = new TrackballControls(camera,renderer.domElement)
}

function animate(params) {
    requestAnimationFrame(animate)
    controls.update()
    render()
}

function render(params) {
    renderer.render(scene, camera)
    css2DRenderer.render(scene,camera)
}

